<template>
	<a-card>
		<a-row>
			<NoAuthPage v-showNoAuth="'D7-1'" :imgBoxStyle="{ height: '40vh', margin: 0 }" />

			<div v-userAuth="'D7-1'">
				<a-button type='primary' v-userAuth="'D7-2'" style="margin-right:1em; margin-bottom:15px"
					@click="authorize = true">
					<!-- <i class="icon icon-noimpower16f" style="margin-right:5px"></i> -->
					<Iconfont class="icon" type="icon-noimpower16f" style="margin-right:5px"></Iconfont>
					{{ $t('Client-authorization') }}
				</a-button>
				<!-- <a-tooltip placement='bottom' v-userAuth="'D7-2'" style="margin:0 0 1em 0 ">
	            <template slot='title'>
	                <span>{{$t('Client-authorization')}}</span>
	            </template>
<a-button type='primary' style="margin-right:1em" @click="authorize = true">
	<a-icon :component="rize" />
</a-button>
</a-tooltip> -->
				<!--取消客户端授权-->
				<!-- <a-tooltip placement='bottom'>
	            <template slot='title'>
	                <span>{{$t('Client-Deauthorization')}}</span>
	            </template>
            	<a-button :disabled="selectedRowKeys.length==0" type='danger' style="margin-right:1em;" @click="selected('cancela')">
	            	<a-icon :component="cancelrize"/>
            	</a-button>
	        </a-tooltip> -->
				<!--分配Lun-->
				<!-- <a-tooltip placement='bottom'>
	            <template slot='title'>
	                <span>{{$t('Assign')}} Lun</span>
	            </template>
            	<a-button :disabled="selectedRowKeys.length==0" type='primary' style="margin-right:1em" @click="selected('allot')">
	            	<a-icon :component="allotbtn"/>
            	</a-button>
	        </a-tooltip> -->
				<!--取消分配Lun-->
				<!-- <a-tooltip placement='bottom'>
	            <template slot='title'>
	                <span>{{$t('Cancel')+$t('Assign')}}Lun</span>
	            </template>
            	<a-button :disabled="selectedRowKeys.length==0" type='danger' style="margin-right:1em;" @click="selected('dellun')">
	            	<a-icon :component="allotdel"/>
            	</a-button>
	        </a-tooltip> -->

				<a-table class='tabstyle' :columns="icolumns" :loading="loading" :dataSource="idata" size="small"
					:pagination='pagination' :rowKey="(record) => record.name" :locale="defaultSetting">
					<!-- :rowSelection='{type:"radio",selectedRowKeys:selectedRowKeys,onChange:onSelectChange,onSelect:onSelect}' -->
					<template slot="client_ip" slot-scope="text, record">
						<span v-if="text">{{ text }}</span>
						<span v-else>-</span>
					</template>
					<span slot="status" slot-scope='status'>
						<span v-if="status == 'normal'">
							<span class="green-circle"></span><span>{{ $t('Actionable') }}</span>
							<!-- <a-tag color="green">{{$t('Actionable')}}</a-tag> -->
						</span>
						<span v-else-if="status == 'link'">
							<span class="orange-circle"></span><span>{{ $t('Connecting') }}</span>
							<!-- <a-tag color="orange">{{$t('Connecting')}}</a-tag> -->
						</span>
						<span v-else-if="status == 'copy'">
							<span class="orange-circle"></span><span>{{ $t('Copying') }}</span>
							<!-- <a-tag color="orange">{{$t('Copying')}}</a-tag> -->
						</span>
						<span v-else-if="status == 'rollback'">
							<span class="orange-circle"></span><span>{{ $t('Rolling-back') }}</span>
							<!-- <a-tag color="orange">{{$t('Rolling-back')}}</a-tag> -->
						</span>
						<span v-else-if="status == 'lun'">
							<span class="orange-circle"></span><span>lun</span>
							<!-- <a-tag color="orange" style="padding:0 1.3em">lun</a-tag> -->
						</span>
						<span v-else-if="status == 'clone'">
							<span class="orange-circle"></span><span>{{ $t('Cloning') }}</span>
							<!-- <a-tag color="orange">{{$t('Cloning')}}</a-tag> -->
						</span>
						<span v-else-if="status == 'flatten'">
							<span class="orange-circle"></span><span>{{ $t('Separating') }}</span>
							<!-- <a-tag color="orange">{{$t('Separating')}}</a-tag> -->
						</span>
						<span v-else-if="status == 'abnormal'">
							<span class="red-circle"></span><span
								:title="$t('Abnormal-no-pwd-user')">{{ $t('Abnormal-no-pwd-user') }}</span>
						</span>
						<!-- <span v-else >{{status}} 
					<a-spin>
					<a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
					</a-spin>
				</span> -->
					</span>
					<template slot="operation" slot-scope='text, record'>
						<!--拓扑图-->
						<a-tooltip placement='bottom'>
							<template slot='title'>
								<span>{{ $t('Topology-graph') }}</span>
							</template>
							<!-- <i 
						class="icon icon-impower16f table-operation-icon"
						@click="openTopology(record)"
					></i> -->
							<Iconfont class="icon table-operation-icon" type="icon-impower16f"
								@click="openTopology(record)"></Iconfont>
						</a-tooltip>
						<!--修改客户端授权信息-->
						<a-tooltip placement='bottom' v-userAuth="'D7-4'">
							<template slot='title'>
								<span>{{ $t('Modify-client-info') }}</span>
							</template>
							<!-- <i 
						class="icon icon-edit16f table-operation-icon"
						@click="openEditClient(record)"
					></i> -->
							<Iconfont class="icon table-operation-icon" type="icon-edit16f"
								@click="openEditClient(record)"></Iconfont>
						</a-tooltip>
						<!--取消客户端授权-->
						<a-tooltip placement='bottom' v-userAuth="'D7-3'">
							<template slot='title'>
								<span>{{ $t('Client-Deauthorization') }}</span>
							</template>
							<!-- <i 
						class="icon icon-noimpower16f table-operation-icon"
						@click="cancela(record)"
					></i> -->
							<Iconfont class="icon table-operation-icon" type="icon-noimpower16f"
								@click="cancela(record)"></Iconfont>
						</a-tooltip>
						<!--复制客户端名、用户名、密码-->
						<a-tooltip placement='bottom'>
							<template slot='title'>
								<span v-if="$store.state.language == 'zh'">复制客户端名、用户名、密码</span>
								<span v-else>Copy client name, user name and password</span>
							</template>
							<!-- <i 
						class="icon icon-copy16f table-operation-icon"
						@click="copyFun(record)"
					></i> -->
							<Iconfont class="icon table-operation-icon" type="icon-copy16f" @click="copyFun(record)">
							</Iconfont>
						</a-tooltip>
					</template>
				</a-table>
			</div>
		</a-row>

		<!--客户端授权-->
		<ClientAuth :visible="authorize" @closeClientAuthDrawer="closeClientAuthDrawer" :lunData="lunData"
			:basedata="basedata" :isLoadingForm="isLoadingForm" @updateData="updateData" />

		<!--分配lun-->
		<a-modal :title="$t('Assign') + 'lun'" v-model='allot' @cancel='cancelhandle' width='35%' @ok='assignlun'
			:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form'>
				<a-form-item :label="$t('Block-name')" v-bind="formlayout">
					<a-select v-decorator="['lun', {
				rules: [{ required: true, message: $t('Choose') + $t('Block-name') }]
			}]" :placeholder="$t('Choose') + $t('Block-name')">
						<a-select-option v-for="(item, index) in basedata.blocks" :value='item'
							:key="index">{{ item }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
		<!--删除Lun-->
		<a-modal :title="$t('Cancel') + $t('Assign') + 'lun'" v-model='dellun' @cancel='cancelhandle' width='35%'
			@ok='delslun' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form'>
				<a-form-item :label="'Lun' + $t('Name')" v-bind="formlayout">
					<a-select v-decorator="['lun', {
				rules: [{ required: true, message: $t('Choose') + 'lun' + $t('Name') }]
			}]" :placeholder="$t('Choose') + 'lun' + $t('Name')">
						<a-select-option v-for="(item, index) in luns" :value='item'
							:key="index">{{ item }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>

		<!--编辑客户端授权-->
		<!-- v-if="edit_client_dialog" -->
		<EditClient :visible="edit_client_dialog" :targetClient="targetClient" :lunData="lunData"
			@closeEditDrawer="closeEditDrawer" :isLoadingForm="isLoadingForm" @editClientOk="editClientOk" />
		<!-- :basedata="basedata" -->

		<!--客户端授权和编辑客户端授权成功后的弹窗-->
		<ConfigClientOk v-if="config_client_dialog" :visible="config_client_dialog"
			:targetConfigClient="targetConfigClient" @closeConfigClientOk="closeConfigClientOk" />

		<!--取消有lun的客户端授权的弹窗-->
		<CancelLunClient v-if="cancel_lun_client_dialog" :visible="cancel_lun_client_dialog"
			:targetClient="targetClient" @closeLunClientDialog="closeLunClientDialog"
			@forceCancelCLient="forceCancelCLient" />

		<!-- 拓扑图 -->
		<TopologyGraph :visible="topologyVisible" :targetClient="targetClient"
			@closeTopologyModal="closeTopologyModal" />

	</a-card>
</template>

<script>
// import rize from '../../../../static/images/svg/ic_authorization_normal.svg'
// import cancelrize from '../../../../static/images/svg/ic_authorization_cancel.svg'
// import allotbtn from '../../../../static/images/svg/ic_allocation_normal.svg'
// import allotdel from '../../../../static/images/svg/ic_allocation_cancel.svg'

import EmptyData from '@/components/common/EmptyData'
import EditClient from '@/components/storage_mgr/block/iscsiOper/EditClient'
import ConfigClientOk from '@/components/storage_mgr/block/iscsiOper/ConfigClientOk'
import CancelLunClient from '@/components/storage_mgr/block/iscsiOper/CancelLunClient'
import NoAuthPage from '@/components/common/NoAuthPage'
import ClientAuth from '@/components/storage_mgr/block/iscsiOper/ClientAuth'
import TopologyGraph from '@/components/storage_mgr/block/iscsiOper/TopologyGraph'
import { sortName, sortIp } from '@/assets/js/tableSortMethods'

import request from '@/request/request'

export default {
	name: "ISCSI",
	// template: '<a-icon :component="rize,allotdel,allotbtn,cancelrize" />',
	components: {
		EmptyData, NoAuthPage,
		ClientAuth, EditClient, ConfigClientOk, CancelLunClient,
		TopologyGraph
	},
	data() {
		return {
			form: this.$form.createForm(this),
			icolumns: [{
				title: this.$t('Client') + this.$t('Name'),
				dataIndex: "name",
				key: "name",
				ellipsis: true,
				sorter: (a, b) => this.sortName(a.name, b.name),
			},
			// {
			// 	title: this.$t('Create')+this.$t('Time'),
			// 	dataIndex: "created",
			// 	ellipsis: true,
			// 	key: "created"
			// },
			{
				title: this.$t('Client') + ' IP',
				dataIndex: "client_ip",
				ellipsis: true,
				key: "client_ip",
				scopedSlots: { customRender: 'client_ip' },
				sorter: (a, b) => this.sortIp(a.client_ip, b.client_ip),
			},
			{
				title: this.$t('Store-target'),
				dataIndex: "target",
				ellipsis: true,
				key: "target",
				sorter: (a, b) => this.sortName(a.target, b.target),
			},
			{
				title: 'Luns' + this.$t('Name'),
				dataIndex: 'luns',
				key: 'luns',
				ellipsis: true,
				customRender: (arr) => {
					if (arr.length == 0) {
						return '-'
					}
					return arr.join(' ; ')
				},
				sorter: (a, b) => this.sortName(a.luns, b.luns),
			},
			{
				title: this.$t('Status'),
				dataIndex: 'status',
				key: 'status',
				ellipsis: true,
				width: 150,
				scopedSlots: { customRender: 'status' },
				sorter: (a, b) => a.status.length - b.status.length,
			},
			{
				title: this.$t('Operate'),
				dataIndex: 'oper',
				key: 'oper',
				width: 150,
				scopedSlots: { customRender: 'operation' }
			}
			],
			searchText: '',
			searchInput: null,
			authorize: false,
			pagination: {
				defaultPageSize: 5,
				showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
				showSizeChanger: true,
				pageSizeOptions: ['5', '10', '15', '20'],
				onChange: (page, pageSize) => { this.selectedRowKeys = []; },
				onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
				buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
			},
			selectedRowKeys: [],
			idata: [],
			basedata: {},
			formlayout: {
				// labelCol:{span:6},
				// wrapperCol:{span:18}
			},
			target: '',
			targets: '',
			allot: false,
			dellun: false,
			// rize,
			// cancelrize,
			// allotbtn,
			// allotdel,
			predate: '',
			luns: [],
			loading: true,
			num: '',
			spinning: false,
			currentClient: '',
			defaultSetting: { emptyText: <EmptyData /> },
			lunData: [],
			edit_client_dialog: false,
			targetClient: {},
			config_client_dialog: false,
			targetConfigClient: {},
			cancel_lun_client_dialog: false,
			topologyVisible: false,
			isLoadingForm: false
		}
	},

	computed: {
		getlanguage() {
			return this.$store.state.language
		}
	},

	watch: {
		flag(val) {
			this.getdata()
		},
		getlanguage(val) {
			this.icolumns = [{
				title: this.$t('Client') + this.$t('Name'),
				dataIndex: "name",
				key: "name",
				ellipsis: true,
				sorter: (a, b) => this.sortName(a.name, b.name),
			},
			{
				title: this.$t('Client') + ' IP',
				dataIndex: "client_ip",
				ellipsis: true,
				key: "client_ip",
				sorter: (a, b) => this.sortIp(a.client_ip, b.client_ip),
			},
			{
				title: this.$t('Store-target'),
				dataIndex: "target",
				ellipsis: true,
				key: "target",
				sorter: (a, b) => this.sortName(a.target, b.target),
			},
			{
				title: 'Luns' + this.$t('Name'),
				dataIndex: 'luns',
				key: 'luns',
				ellipsis: true,
				customRender: (arr) => {
					if (arr.length == 0) {
						return '-'
					}
					return arr.join(' ; ')
				},
				sorter: (a, b) => this.sortName(a.luns, b.luns),
			},
			{
				title: this.$t('Status'),
				dataIndex: 'status',
				key: 'status',
				ellipsis: true,
				width: 150,
				scopedSlots: { customRender: 'status' },
				sorter: (a, b) => a.status.length - b.status.length,
			},
			{
				title: this.$t('Operate'),
				dataIndex: 'oper',
				key: 'oper',
				width: 150,
				scopedSlots: { customRender: 'operation' }
			}
			];
		}
	},
	mounted() {
		this.getdata()
		this.getbasedata()
		this.pre()
	},
	methods: {
		getblockdata() {
			request('get', 'block/').then(res => {
				// this.$axios.get(this.allurl+'block/').then(res=>{
				// for(var i=0;i<res.data.length;i++){  //数据单位处理
				// 	res.data[i].size = this.bytesToSize(res.data[i].size)
				// 	res.data[i].num_objs = this.bytesToBs(res.data[i].num_objs)
				// 	res.data[i].obj_size = this.bytesToSize(res.data[i].obj_size)
				// 	res.data[i].disk_usage = this.bytesToSize(res.data[i].disk_usage)
				// 	res.data[i].total_disk_usage = this.bytesToSize(res.data[i].total_disk_usage)
				// }
				if (res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
				} else {
					this.$store.commit('getblockdata', {
						blockdata: res.data,
					})
				}
			})
		},
		getdata() {
			this.loading = true
			request('get', 'block/iscsi/').then(res => {
				// console.log('iscsi列表', res)
				if (res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
				} else {
					this.idata = res.data;
					this.loading = false;
					if (this.num !== '') {
						this.luns = this.idata[this.num].luns;
					}
				}
			}).catch(err => {
				console.log(err);
			}).finally(() => {
				this.loading = false;
			})
		},
		//获取target和块设备名
		async getbasedata() {
			this.isLoadingForm = true;
			const res = await this.$api.iscsi.getTargetRequest();
			console.log('获取target和块设备名', res)
			if (res && res.data) {
				this.basedata = res.data;
				this.lunData = [];
				this.basedata.blocks.forEach(item => {
					this.lunData.push({
						key: item,
						title: item
					})
				})
			}
			this.isLoadingForm = false;
		},
		pre() {
			const date = new Date()
			let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
			this.predate = 'iqn.' + date.getFullYear() + '-' + month + '.com.wz:'
		},
		handleSearch(selectedKeys, confirm) {
			confirm()
			this.searchText = selectedKeys[0]
		},
		handleReset(clearFilters) {
			clearFilters()
			this.searchText = ''
		},
		onSelect(record, selected, selectedRows) {
			this.target = record.name;
			this.targets = record.target;
			this.luns = record.luns;
			this.currentClient = record;
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			// this.getbasedata()
			for (let i = 0; i < this.idata.length; i++) {
				if (selectedRows[0].name == this.idata[i].name) {
					// this.target = this.idata[i].name;
					// this.targets = this.idata[i].target;
					// this.luns = this.idata[i].luns;
					this.num = i;
				}
			}
			this.selectedRowKeys = selectedRowKeys
		},
		//客户端授权
		// addsub(e) {
		//   e.preventDefault();
		//   this.forma.validateFields((err,val)=>{
		//     if(!err){
		// 			this.isAddLoading = true;
		// 			// this.spinning = true
		// 			request('put', 'block/iscsi/',{
		// 				target: val.target,
		// 				iqn: this.predate+val.iqn,
		// 				username: val.username,
		// 				password: val.pwd,
		// 				luns: this.targetKeys
		// 			}).then(res=>{
		// 				// this.model(res.data.id) //返回模板
		//         // this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
		// 				// this.gettask()  //任务栏信息
		// 				// this.spinning = false
		//         this.authorize=false
		// 				if(res.data.flag == 0) {
		// 					this.getdata()
		// 					this.getblockdata()
		// 					this.targetConfigClient = {
		// 						name: this.predate+val.iqn,
		// 						username: val.username,
		// 						password: val.pwd
		// 					}
		// 					this.config_client_dialog = true;
		// 				}else {
		// 					this.model(res.data.id) //返回模板
		//         	this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
		// 				}
		// 				this.forma.resetFields();
		// 			}).finally(() => {
		// 				this.isAddLoading = false;
		// 			})
		//     }
		//   })
		// },

		//分配lun
		assignlun(e) {
			e.preventDefault();
			this.form.validateFields((err, val) => {
				if (!err) {
					this.spinning = true
					request('post', 'block/iscsi/addLun', {
						target: this.targets,
						iqn: this.target,
						lun: val.lun,
						// is_lun:	true						
					}).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false;
						this.allot = false;
						this.form.resetFields();
						this.selectedRowKeys = [];
						this.getdata()
						this.getblockdata()
					}).catch(err => {
						this.spinning = false;
						this.allot = false;
						this.form.resetFields();
						this.selectedRowKeys = [];
					})
				}
			})
		},

		//取消分配lun
		delslun(e) {
			e.preventDefault();
			this.form.validateFields((err, val) => {
				if (!err) {
					this.spinning = true
					request('post', 'block/iscsi/rmLun', {
						target: this.targets,
						iqn: this.target,
						lun: val.lun,
						// is_lun:	false					
					}).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false
						this.dellun = false
						this.form.resetFields();
						this.selectedRowKeys = [];
						this.getdata()
						this.getblockdata()
					}).catch(err => {
						this.spinning = false;
						this.dellun = false;
						this.form.resetFields();
						this.selectedRowKeys = [];
					})
				}
			})
		},
		cancelhandle() {
			this.spinning = false
			this.form.resetFields();
		},
		// 关闭客户端授权弹窗
		closeClientAuthDrawer() {
			this.authorize = false;
		},
		selected(name) {
			if (this.selectedRowKeys.length != 0) {
				if (name == 'cancela') {
					if (this.idata[this.num].status !== 'normal') {
						this.$notification['error']({
							message: this.$t('Cannot-op-iqn')
						})
					} else {
						this.cancela()
					}
				} else if (name == 'allot') {
					this.getbasedata()
					this.allot = true
				} else if (name == 'dellun') {
					if (this.idata[this.num].status !== 'normal') {
						this.$notification['error']({
							message: this.$t('Cannot-op-iqn')
						})
					} else {
						this.dellun = true
					}
				}
			} else
				this.$notification['error']({
					message: this.$t('Choose') + this.$t('Operating-object')
				})
		},
		//取消客户端授权
		cancela(record) {
			let _this = this
			this.targetClient = record;
			// if(this.currentClient.luns.length!=0) {
			if (record.luns.length != 0) {
				// this.$notification['error']({
				//   message: this.$t('Cancel-client-tip')
				// })
				this.cancel_lun_client_dialog = true;
			} else {
				this.$confirm({
					title: this.$t('Delete') + this.$t('Client'),
					// content:this.$t('Sure-to-del')+": "+this.target+' ？',
					// content: this.$t('Sure-to-del')+": "+record.name+' ？',
					content: this.$store.state.language == 'zh' ? '取消客户端授权后，用户将无法访问该块设备，如需访问，需要重新授权。请问是否确定？'
						: 'After the authorization of the client is cancelled, the user will not be able to access the block device. If access is required, it needs to be re authorized. Are you sure?',
					cancelText: this.$t('Cancel'),
					okText: this.$t('Sure'),
					okType: 'danger',
					onOk() {
						request('DELETE', 'block/iscsi/', {
							// data:{
							target: record.target,
							iqn: record.name //客户端名称
							// target: _this.targets,
							// iqn: _this.target //客户端名称
							// }					
						}).then(res => {
							_this.model(res.data.id) //返回模板
							_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
							// _this.gettask()  //任务栏信息
							_this.selectedRowKeys = [];
							_this.getdata()
							_this.getblockdata()
						})
					},
					onCancel() {
					}
				})
			}
		},

		//复制客户端名、用户名、密码
		copyFun(record) {
			//客户端名:...\n用户名:...\n密码:...
			let str = `${this.$t('Client-name')}:${record.name}\n${this.$t('Username')}:${record.username}\n${this.$t('Password')}:${record.password}`
			if (navigator.clipboard && window.isSecureContext) {
				//新方法：
				navigator.clipboard.writeText(str).then(() => {
					/* clipboard successfully set */
					this.$message.success(this.$t('Copy-succeeded'));
				}, () => {
					/* clipboard write failed */
					this.$message.error(this.$t('Copy-failed'));
				});
			} else {
				// 旧方法：
				const textareaDom = document.createElement('textarea');
				document.body.appendChild(textareaDom);
				// textareaDom.setAttribute('value', str);
				textareaDom.value = str;
				textareaDom.focus();
				textareaDom.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message.success(this.$t('Copy-succeeded'));
				} else {
					this.$message.error(this.$t('Copy-failed'));
				}
				document.body.removeChild(textareaDom);
			}
		},

		//打开拓扑图
		openTopology(record) {
			this.targetClient = record;
			this.topologyVisible = true;
		},

		//打开编辑客户端授权
		openEditClient(record) {
			this.targetClient = record;
			this.edit_client_dialog = true;
		},

		//编辑客户端授权成功
		editClientOk(payload) {
			this.getdata();
			this.edit_client_dialog = false;
			this.targetConfigClient = payload;
			this.config_client_dialog = true;
		},

		//取消编辑客户端授权的抽屉显示
		closeEditDrawer() {
			this.edit_client_dialog = false;
		},

		//取消配置块设备成功的弹窗
		closeConfigClientOk() {
			this.config_client_dialog = false;
		},

		//取消有lun的客户端授权的弹窗
		closeLunClientDialog() {
			this.cancel_lun_client_dialog = false;
		},

		//强制取消客户端授权
		forceCancelCLient(res) {
			this.model(res.data.id) //返回模板
			this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
			// _this.gettask()  //任务栏信息
			this.selectedRowKeys = [];
			this.getdata()
			this.getblockdata()
			this.cancel_lun_client_dialog = false;
		},

		// 客户端授权成功后，更新数据
		updateData(val) {
			this.getdata();
			this.getblockdata();
			this.targetConfigClient = {
				name: this.predate + val.iqn,
				username: val.username,
				password: val.pwd
			};
			this.config_client_dialog = true;
		},

		//关闭拓扑图
		closeTopologyModal() {
			this.topologyVisible = false;
		},

		// 对名称进行排序
		sortName(a, b) {
			return sortName(a, b)
		},

		// ip地址排序比较
		sortIp(a, b) {
			return sortIp(a, b)
		},
	}
};
</script>
<style scoped>
.draw-bottom-btn {
	float: right;
	padding-bottom: 20px;
}

::v-deep.ant-transfer-list-header {
	background: #e8e8e8;
}
</style>
